<!DOCTYPE html>
<html>
<head>
<style>
footer {
position: absolute;
bottom: 1em;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: #5f5f77;
font-size: 35px;
font-weight: bold;
min-height: 12.5%;
width: 100%;
}
nav li {
display: inline-block;
text-align: center;
font-size: 1em;
padding: 10px;
width: 160px;
}
iframe {
height: 100%;
}
background{
position: absolute;
margin: auto;
width: 100%;
height: 100%;
}
html, body {
padding:0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<iframe style="width: 100%; height: 100%;" width='100%' height='100%' frameborder='0' src='https://baenm296.cartodb.com/viz/422f8c52-e9cb-11e4-a95d-0e0c41326911/embed_map' allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
<footer id="navigation">
<nav id="search">
<ul id="category">
<li id="creative">
<a href=“creative.html">Creative</a>
</li>
<li id="divided">
<a href=“divided.html"> Divided </a>
</li>
<li id="stabilized">
<a href=“stabilized.html"> Stabilized </a>
</li>
<li id="Bifurcated">
<a href=“bifurcated.html"> Bifurcated </a>
</li>
<li id="Collective">
<a href=“collective.html"> Collective </a>
</li>
<li id="Cohabitating">
<a href=“cohabitating.html"> Cohabitating </a>
</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>